<template>
    <div style="background: #EFF1F6;height: 100%;" class="declareList">
        <el-container style="height: 100%;">
            <el-header style="margin-bottom: 20px;background-color: #ffffff;height: 98px;">
                <div
                    style="width: 1200px;margin: 0 auto;height: 98px;align-items: center;display: flex;flex-direction: row;justify-content: space-between;">
                    <div>
                        <el-form @submit.native.prevent ref="form" label-width="160px" style="width: 500px;">
                            <el-form-item class="text_left" label="单位名称：" style="font-size: 24px;color: #333333;">
                                <el-input style="width: 100%;" type="text" v-model.trim="form.companyName"
                                    placeholder="请输入单位名称"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <el-button icon="el-icon-search" round type="primary" @click="getDeclareList">查询</el-button>
                        <el-button icon="el-icon-refresh" round type="default" @click="reset">重置</el-button>
                    </div>
                </div>
            </el-header>
            <el-main style="background-color: #FFFFFF;height: 100%;">
                <ul class="declareListUl">
                    <li v-for="(item,index) in selects" :key="index" :class="[index==tabIndex?'declareListUlActive':'']"
                        @click="tabClick(item.value,index)">{{item.label}}</li>
                </ul>
                <div class="declareListTips" v-if="tabIndex==0">
                    <fieldset>
                        <legend>银行</legend>
                    </fieldset>
                    <p>（温馨提醒：以下为银行主动公开的信息，非建设部门提供或审核的信息，投保人在投保前应核实相关信息，并自行承担投保风险）</p>
                </div>
                <div class="declareListTips" v-if="tabIndex==1">
                    <fieldset>
                        <legend>担保公司</legend>
                    </fieldset>
                    <p>（温馨提醒：以下为担保公司主动公开的信息，非建设部门提供或审核的信息，投保人在投保前应核实相关信息，并自行承担投保风险）</p>
                </div>
                <div class="declareListTips" v-if="tabIndex==2">
                    <fieldset>
                        <legend>保险</legend>
                    </fieldset>
                    <p>（温馨提醒：以下为保险公司主动公开的信息，非建设部门提供或审核的信息，投保人在投保前应核实相关信息，并自行承担投保风险）</p>
                </div>
                <el-table :data="tableLists" class="declareListTable" :show-header="true" :border="true" :fit="true"
                    highlight-current-row>
                    <el-table-column align="center" prop="companyName" label="单位名称" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="realName" label="联系人" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="fixTelephone" label="固定电话" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="地址" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="保单查询网址" style="width: 3.75rem;">
                        <template slot-scope="scope">
                            <a v-if="!String.isEmptyOrNUll(scope.row.guaranteeUrl)" style="color: #3086F7;"
                                target="_blank" :href="scope.row.guaranteeUrl">查看</a>
                            <span v-else></span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="资料下载" style="width: 3.75rem;">
                        <template slot-scope="scope">
                            <a download="zip" :href="scope.row.uploadFileUrl">
                                <img src="/static/img/indexnew/downdeclare.png" alt=""
                                    style="position: relative;top: 8px;">
                            </a>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer style="background-color: #FFFFFF;text-align: right;">
                <el-pagination class="declareListTable" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page.sync="form.pageNo" :page-sizes="[5, 10, 15, 20]"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    var _this;
    import common from '../../assets/basejs/common.js'
    export default {
        data() {
            return {
                selects: [{
                        label: "银行",
                        value: 0
                    },
                    {
                        label: "担保公司",
                        value: 1
                    },
                    {
                        label: "保险",
                        value: 2
                    }
                ],
                tabIndex: 0,
                tableLists: [],
                form: {
                    pageNo: 1,
                    pageSize: 10,
                    companyName: "",
                    type: 0
                },
                total: 0
            }
        },
        beforeCreate() {
            _this = this;
        },
        mounted() {
            common._setVue(this);
            this.getDeclareList();
        },
        methods: {
            tabClick: function(id, index) {
                this.tabIndex = index;
                this.form.type=id;
                this.getDeclareList();
            },
            getDeclareList: function() {
                common.post(this.api.getUploadFileCheckPass, this.form, function(res) {
                    if (String.isEmptyOrNUll(res.resultMap)) {
                        _this.tableLists = res.resultMap;
                        return;
                    }
                    _this.tableLists = res.resultMap;
                    _this.total = parseInt(res.total);
                }, function(error) {
                    _this.tableLists = [];
                    _this.$message.error(error.resultMsg);
                });
            },
            reset: function() {
                this.form.companyName = "";
                this.form.type = 0;
                this.form.pageSize = 10;
                this.form.pageNo = 1;
                this.getDeclareList();
            },
            //分页选择
            handleSizeChange: function(val) {
                this.form.pageNo = 1;
                this.form.pageSize = val;
                this.getDeclareList();
            },
            //分页当前页点击
            handleCurrentChange: function(val) {
                this.form.pageNo = val;
                this.getDeclareList();
            },
            downloadTicket(item) {
                if (String.isEmptyOrNUll(item.ticketUrl)) {
                    _this.$message.error("暂无准考证信息！");
                    return;
                }
                window.open(item.ticketUrl);
            }
        }
    }
</script>

<style>
    .declareListTips {
        width: 1200px;
        margin: 0 auto;
        color: #f34b1e;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .declareListTips fieldset {
        margin: 0 0 10px;
        padding-left: 15px;
        border: 1px solid #999999;
        border-bottom: 0;
        border-left: 0;
        border-right: 0;
    }

    .declareListTips legend {
        padding: 0 10px;
        color: #f34b1e;
        font-size: 22px;
        line-height: 22px;
    }

    .declareListUl {
        width: 1200px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .declareListUl li {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        color: #333333;
        display: inline-block;
        cursor: pointer;
        font-size: 20px;
        /* border-bottom: 1px solid #0066CC; */
    }
    .declareListUl li:hover{
        border-bottom: 1px solid #0066CC;
    }

    .declareListUl .declareListUlActive {
        color: #FFFFFF;
        background-color: #0066CC;
        border-radius: 3px;
    }

    .declareListTable {
        width: 1200px;
        margin: 0 auto;
    }

    .declareList label.el-form-item__label,
    .declareList .el-form input.el-input__inner {
        font-size: 24px;
        height: 52px;
    }

    .declareList .el-pagination__sizes input.el-input__inner,
    .declareList .el-pagination__jump input.el-input__inner {
        height: 36px;
        font-size: 18px;
    }

    .declareListTable.el-table .cell {
        line-height: 40px !important;
    }

    .declareListTable.el-table span.el-table__empty-text {
        font-size: 28px;
    }

    .declareListTable th {
        height: 88px;
        background-color: #D1D7E3;
        color: #333333;
        font-size: 28px;
    }

    .declareListTable td {
        height: 80px;
        color: #333333;
        font-size: 24px;
    }

    .declareList .el-form-item.text_left {
        margin-bottom: 0 !important;
    }

    .declareListTable.el-pagination span,
    .declareListTable.el-pagination li,
    .declareListTable.el-pagination button {
        font-size: 24px;
    }
</style>
